<template>
  <view class="page">
    <!--  -->
    <view class="header">
      <image class="background" :src="rankIcon"></image>
      <view class="left">
        <text class="text">排行榜</text>
        <text class="text" style="margin-top: 20rpx">RANKING LIST</text>
      </view>
      <view class="right">
        <view class="btn-item" @click="() => $uni.navigateTo({ url: '/studyRoom/pages/studyRoomList/index' })">
          <view class="icon-container">
            <image class="icon" :src="studyRoomIcon"></image>
          </view>
          <view class="text">自习室</view>
        </view>
        <view class="btn-item" @click="() => $uni.switchTab({ url: '/pages/mine/mine' })">
          <view class="icon-container">
            <image class="icon" :src="mineIcon"></image>
          </view>
          <view class="text">我的</view>
        </view>
      </view>
    </view>
    <view class="content">
      <!--			背单词 / 刷真题 / 开放自习室-->
      <view class="ranking-type-choice">
        <view class="list">
          <view class="item" v-for="item in rankTypeChoiceList" :key="item.value"
            :class="{ active: item.value === currentSelectedRankType }" @click="() => {
        currentSelectedRankType = item.value
        resetPaginationAndReloadData()
      }
        ">{{ item.label }}</view>
        </view>
        <!--				更多活动-->
        <view class="more-icon-container" v-if="activityRankingList.length > 0">
          <!--					按钮-->
          <image class="more-icon" @click="showMorePopup = true" :src="moreIcon"></image>
          <!--					弹窗-->
          <view class="more-popup" v-show="showMorePopup">
            <view class="mask" @click.stop="showMorePopup = false"></view>
            <view class="content">
              <view class="item" v-for="item in activityRankingList" :key="item.rankingListId" @click="() => $uni.navigateTo({ url: handleUrlParams('/studyRoom/pages/rank/activityRank', { details: JSON.stringify(item) }) })
        ">{{ item.rankingListName }}</view>
            </view>
          </view>
        </view>
      </view>
      <!--			周榜 / 月榜 / 总榜-->
      <view class="search-type-choice">
        <view class="item" v-for="item in searchTypeChoiceList" :key="item.value"
          :class="{ active: item.value === currentSelectedSearchType }" @click="() => {
        currentSelectedSearchType = item.value
        resetPaginationAndReloadData()
      }
        ">{{ item.label }}</view>
      </view>
      <!--	具体列表-->
      <view class="rank-list">
        <view class="table-header column">
          <view class="item column-item-1 column-item">排名</view>
          <view class="item column-item-2 column-item">用户</view>
          <view class="item column-item-3 column-item" style="color: #a75b07">累计学习时长</view>
        </view>
        <template v-if="rankRecordList.length > 0">
          <view class="rank-item column" v-for="(item, index) in rankRecordList" :key="item.userId">
            <!--					排名-->
            <view class="column-item-1 column-item">
              <view class="rank-num" :class="'rank-num-' + index">{{ index }}</view>
            </view>
            <!--					用户信息-->
            <view class="userInfo column-item-2 column-item">
              <!--						头像-->
              <view class="avatar-container">
                <image class="avatar" :src="getShowImage(item.userIcon)" v-if="item.userIcon"></image>
                <text class="avatar text">{{ item.nickName[0] }}</text>
              </view>
              <!--						昵称-->
              <view class="nick-name">{{ item.nickName }}</view>
            </view>
            <!--					累计学习时长-->
            <view class="duration column-item-3 column-item">
              <!--							时-->
              <template v-if="item.duration.h > 0">
                <text class="number">{{ item.duration.h }}</text>
                <text>h</text>
              </template>

              <!--						分-->
              <template v-if="item.duration.m > 0">
                <text class="number">{{ item.duration.m }}</text>
                <text>min</text>
              </template>

              <!--						秒-->
              <template v-if="item.duration.h === 0">
                <text class="number">{{ item.duration.s }}</text>
                <text>s</text>
              </template>
            </view>
          </view>
          <uni-load-more :status="loadMoreStatusText"></uni-load-more>
        </template>
        <empty v-else height="900rpx"></empty>
      </view>
    </view>
  </view>
</template>

<script>
import mineIcon from "./assets/mine.svg"
import studyRoomIcon from "./assets/studyRoom.png"
import rankIcon from "./assets/rank.png"
import moreIcon from "./assets/more.svg"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"
import dateUtils from "@/utils/dateUtils"
import empty from "@/components/empty.vue"

export default {
  components: {
    uniLoadMore,
    empty,
  },
  data() {
    return {
      mineIcon,
      studyRoomIcon,
      rankIcon,
      moreIcon,
      showMorePopup: false,
      rankTypeChoiceList: [
        {
          label: "背单词",
          value: "word",
        },
        {
          label: "刷真题",
          value: "question",
        },
        {
          label: "开放自习室",
          value: "self_study",
        },
      ],
      currentSelectedRankType: "self_study",
      searchTypeChoiceList: [
        {
          label: "周榜",
          value: "week",
        },
        {
          label: "月榜",
          value: "month",
        },
        {
          label: "总榜",
          value: "all",
        },
      ],
      currentSelectedSearchType: "all",
      pagination: {
        current: 1,
        size: 15,
      },
      loadMoreStatusText: "more",
      rankRecordList: [],
      //活动排行榜
      activityRankingList: [],
    }
  },
  onLoad() {
    this.resetPaginationAndReloadData()
    //获取活动排行榜的活动列表
    request({
      url: "studyRankingList/getStudyRankingList",
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.activityRankingList = data
    })
  },
  methods: {
    handleUrlParams,
    getShowImage,
    //获取排行榜数据
    getRankRecordList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        request({
          url: "statistics/wordsDurationRanking",
          data: {
            rankingType: this.currentSelectedRankType,
            searchType: this.currentSelectedSearchType,
            current: this.pagination.current,
            size: this.pagination.size,
          },
          errorHandle: true,
        }).then((data) => {
          //格式化时间
          for (let record of data.records) {
            record.duration = dateUtils.formatTimeObject2(record.duration)
          }
          this.rankRecordList.push(...data.records)
          if (this.rankRecordList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    //重置分页并重新加载数据
    resetPaginationAndReloadData() {
      this.pagination.current = 1
      this.rankRecordList = []
      uni.showLoading({ title: "加载中" })
      this.getRankRecordList().finally(() => {
        uni.hideLoading()
      })
    },
  },
  //页面拉到底部加载下一页
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") {
      return
    }
    this.pagination.current++
    this.getRankRecordList()
  },
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--gray-background-color);

  padding: {
    bottom: env(safe-area-inset-bottom);
  }

  >.header {
    display: flex;
    align-items: center;
    padding: 30rpx;
    position: relative;

    .background {
      position: absolute;
      left: 176rpx;
      top: 0;
      width: 284rpx;
      bottom: 0;
      height: 100%;
    }

    .left {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .text {
        font-size: 40rpx;
      }
    }

    .right {
      display: flex;

      .btn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 30rpx;

        .icon-container {
          background: var(--background-color);
          border: 1px solid rgba(187, 187, 187, 1);
          border-radius: 4px;
          width: 90rpx;
          height: 90rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 50rpx;
            height: 50rpx;
          }
        }

        .text {
          margin-top: 8rpx;
          color: #666060;
          font-size: 30rpx;
        }
      }
    }
  }

  >.content {
    background: var(--background-color);
    border-radius: 30px 30px 0 0;
    padding: 40rpx;
    min-height: calc(100vh - 198rpx);

    .ranking-type-choice {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .list {
        display: flex;

        .item {
          &:not(:first-child) {
            margin-left: 40rpx;
          }

          padding-bottom: 6rpx;
          font-size: 32rpx;

          &.active {
            color: #1684fc;
          }

          position: relative;

          &.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6rpx;
            height: 6rpx;
            background: #1684fc;
          }
        }
      }

      .more-icon-container {
        width: 50rpx;
        height: 50rpx;
        position: relative;

        .more-icon {
          width: 100%;
          height: 100%;
        }

        .more-popup {
          .mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }

          .content {
            position: absolute;
            top: calc(100% + 20rpx);
            right: 0;
            background: var(--background-color);
            border-radius: 10rpx;
            box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
            max-height: 800rpx;
            overflow-y: auto;

            .item {
              width: 400rpx;
              text-align: center;
              padding: 20rpx 0;
              font-size: 32rpx;
              font-weight: bold;
              //文本溢出自动加省略号
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }

    .search-type-choice {
      display: flex;
      margin-top: 30rpx;
      border: 2rpx solid #34cc5f;
      border-radius: 10rpx;

      .item {
        width: 0;
        flex: 1;
        padding: 10rpx 0;
        font-size: 32rpx;
        color: #34cc5f;
        text-align: center;

        &:not(:first-child) {
          border-left: 2rpx solid #34cc5f;
        }

        &.active {
          background: #34cc5f;
          color: var(--text-color-white);
        }
      }
    }

    .rank-list {
      margin-top: 30rpx;

      .column {
        display: flex;
        margin-bottom: 30rpx;

        .column-item {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .column-item-1 {
          flex-grow: 1;
          width: 0;
        }

        .column-item-2 {
          flex-grow: 3;
          width: 0;
          margin-left: 20rpx;
        }

        .column-item-3 {
          flex-grow: 2;
          width: 0;
          margin-left: 20rpx;
        }
      }

      .table-header {
        .item {
          font-size: 32rpx;
          color: #666060;
        }
      }

      .rank-item {
        .rank-num {
          border: 6rpx solid #bbbbbb;
          font-size: 30rpx;
          border-radius: 6rpx;
          width: 60rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #bbbbbb;
          font-weight: bold;

          &.rank-num-0 {
            color: #a70707;
            border-color: #a70707;
          }

          &.rank-num-1 {
            color: #0774a7;
            border-color: #0774a7;
          }

          &.rank-num-2 {
            color: #fbca42;
            border-color: #fbca42;
          }
        }

        .userInfo {
          .avatar-container {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            overflow: hidden;

            .avatar {
              width: 100%;
              height: 100%;
            }

            .text {
              font-size: 32rpx;
              color: #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #3c3c3c;
            }
          }

          .nick-name {
            margin-left: 16rpx;
            width: 0;
            flex: 1;
            font-size: 30rpx;
            //文本溢出部分自动加省略号
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .duration {
          font-size: 32rpx;

          .number {
            color: #a75b07;
          }
        }
      }
    }
  }
}
</style>
